import * as THREE from 'three';
// 导入 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as dat from 'dat.gui'

/**
 *  目标：学习 Raycaster
 */



// 创建场景
const scene = new THREE.Scene();

// 创建相机 fov（角度）, aspect （宽高比）, near 近裁剪面，far 远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0, 20, 20)
scene.add(camera);

// 添加物体
// 随机添加box
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff , wireframe: true});
const colorMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 生成立方体
const cubeArr = []
const cubeNum = 5
const gapScale = 0.5
for (let i = -cubeNum; i < cubeNum; i++) {
    for (let j = -cubeNum; j < cubeNum; j++) {
        for (let z = -cubeNum; z < cubeNum; z++) {
            const cube = new THREE.Mesh(geometry, material)
            cube.position.set(i + i%2 * gapScale, j + j%2 * gapScale, z + z%2 * gapScale)
            scene.add(cube)
            cubeArr.push(cube)
        }
    }
}

// 创建投射光线对象
const raycaster = new THREE.Raycaster();
// 监听鼠标位置对象
const mouse = new THREE.Vector2();

// 鼠标移动事件
window.addEventListener("mousemove",(e)=>{
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1
    mouse.y = -((e.clientY / window.innerHeight) * 2 - 1)
    raycaster.setFromCamera(mouse, camera)
    // 计算射线与物体的交点
    const intersects = raycaster.intersectObjects(cubeArr)
    if (intersects.length > 0) {
        intersects.forEach(it=>it.object.material = colorMaterial)
    }
})

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);


// 将 webgl 渲染的 canvas 添加到 body 中
document.body.appendChild(renderer.domElement);

// 设置相机 和 场景 通过渲染器渲染
// renderer.render(scene,camera)

// 创建轨道控制器 (相机,用于渲染的dom)
const controls = new OrbitControls(camera, renderer.domElement);
// 开启阻尼
controls.enableDamping = true;

// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(3);
// scene.add( axesHelper );

// 设置 clock
const clock = new THREE.Clock();


/**
 * 渲染函数
 * L = V*T   距离 = 速度 * 时间
 */
function render() {
    controls.update()
    renderer.render(scene, camera)
    // 浏览器自带的 请求动画帧的方法 ，这里设置 没一帧都吊用一下 render 函数
    requestAnimationFrame(render)
}
render();

// 监听窗口大小变化
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // 重新设置相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 重新设置相机的裁剪面(投影矩阵)
    camera.updateProjectionMatrix();

    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
}